<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/common :: head" />
<body>
  <div th:replace="fragments/common :: jQuery" />
  <div class="portletBody">
    <div id="menu" th:include="fragments/menus :: main (group)" />
    <div>
      <h1 th:if="${groupForm.groupId == null}" th:text="#{groups.header.new}"></h1>
      <h1 th:if="${groupForm.groupId != null}" th:text="#{groups.header.edit}"></h1>
    </div>
    <div class="row">
      <div class="col-sm-8">
        <div class="sak-banner-error" th:if="${errorMessage != null}" th:text="${errorMessage}"></div>
        <p th:text="#{groups.instruction}"></p>
      </div>
    </div>
    <form id="creategroup-form" action="#" th:action="@{/saveGroup}" th:object="${groupForm}" method="post">
      <input type="hidden" id="groupId" name="groupId" th:field="*{groupId}"/>
      <input type="hidden" id="filterByGroupId" name="filterByGroupId" th:field="*{filterByGroupId}" th:if="${!groupFilterEnabled}" />
      <div class="row mb-2">
        <div class="col-sm-8">
          <label for="groupTitle" class="form-control-label block" th:text="|* #{groups.title}|">* Group Title</label>
          <input name="groupTitle" id="groupTitle" type="text" th:field="*{groupTitle}" size="50" maxlength="99" class="form-control" th:placeholder="#{groups.title}" required="required"/>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-sm-8">
          <label for="groupDescription" class="form-control-label block" th:text="#{groups.description}">Description</label>
          <textarea name="groupDescription" class="form-control" rows="10" cols="80" th:field="*{groupDescription}" th:placeholder="#{groups.description}"></textarea>
        </div>
      </div>
      <div class="mb-2">
        <label for="groupAllowViewMembership" class="form-control-label block">
          <input id="groupAllowViewMembership" class="form-check-input" type="checkbox" th:field="*{groupAllowViewMembership}" th:checked="${groupForm.groupAllowViewMembership}"/>
          <span th:text="#{groups.allowviewmembership}"></span>
        </label>
      </div>
      <div class="row" th:if="${!joinableSetList.isEmpty()}">
        <div class="col-sm-8">
          <label for="groupJoinableSet" class="form-control-label block" th:text="#{groups.joinableset}">Joinable Set</label>
          <select class="form-control" id="groupJoinableSet" th:field="*{joinableSetName}">
            <option value="" th:text="#{groups.none}">
            <option th:each="joinableSet : ${joinableSetList}" th:value="${joinableSet}" th:text="${joinableSet}">
          </select>
        </div>
      </div>
      <div id="joinableOptionsDiv" class="row" th:if="${!joinableSetList.isEmpty()}">
        <div class="col-sm-8">
          <div class="card mb-3 p-3">
            <div class="form-check">
              <label for="groupAllowPreviewMembership" class="form-control-label block">
                <input id="groupAllowPreviewMembership" class="form-check-input" type="checkbox" th:field="*{groupAllowPreviewMembership}" th:checked="${groupForm.groupAllowPreviewMembership}"/>
                <span th:text="#{groups.joinableset.allowpreviewmembership}"></span>
              </label>
            </div>
            <div class="form-check">
              <label for="groupUnjoinable" class="form-control-label block">
                <input id="groupUnjoinable" class="form-check-input" type="checkbox" th:field="*{groupUnjoinable}" th:checked="${groupForm.groupUnjoinable}"/>
                <span th:text="#{groups.joinableset.allowunjoin}"></span>
              </label>
            </div>
            <div class="block">
              <label for="joinableSetNumOfMembers" class="form-control-label" th:text="#{groups.joinableset.maxmembers}">Max members:</label>
              <a class="si si-info-circle" tabindex="0" data-bs-placement="bottom" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" th:attr="data-bs-content=''+#{groups.joinableset.maxmembers.info}+''"></a>
            </div>
            <input name="joinableSetNumOfMembers" id="joinableSetNumOfMembers" type="number" th:field="*{joinableSetNumOfMembers}" min="1" max="999" class="form-control"/>
          </div>
        </div>
        <div class="col-sm-8">
          <div class="form-check block">
            <label for="groupJoinableShowAllUsers" class="form-control-label">
              <input id="groupJoinableShowAllUsers" class="form-check-input" type="checkbox" th:field="*{groupJoinableShowAllUsers}" th:checked="${groupForm.groupJoinableShowAllUsers}"/>
              <span th:text="#{groups.joinableset.show.all}">Show all site participants, even if they already joined a group of this joinable set</span>
            </label>
            <a class="si si-info-circle" tabindex="0" data-placement="bottom" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-html="true" th:attr="data-bs-content=''+#{groups.joinableset.show.all.info}+''"></a>
          </div>
        </div>
      </div>
      <div class="row" th:if="${groupFilterEnabled && (!groupList.isEmpty() || !sectionList.isEmpty())}">
        <div class="col-sm-8">
          <label for="groupMembershipFilter" class="form-control-label block" th:text="#{groups.filter.membership}">Filter membership</label>
          <select class="form-control" id="groupMembershipFilter" th:field="*{filterByGroupId}">
            <option value="" th:text="#{groups.none}">
            <option th:each="group : ${groupList}" th:value="${group.id}" th:text="|#{groups.filter.membership.group} ${group.title}|">
            <option th:each="section : ${sectionList}" th:value="${section.id}" th:text="|#{groups.filter.membership.section} ${section.title}|">
          </select>
        </div>
      </div>
      <div class="row">
          <div class="col-sm-8">
            <label for="groupMembers" class="form-control-label block" th:text="#{groups.assigned.members}">Assigned Members</label>
            <select name="groupMembers" th:field="*{groupMembers}" id="groupMembers" class="form-control" multiple="multiple">
              <option th:selected="${groupForm.groupMembers != null && groupForm.groupMembers.contains(siteRole.id)}" th:each="siteRole : ${siteRoleList}" th:value="${siteRole.id}" th:text="|#{groups.role} ${siteRole.id}|"></option>
              <option th:selected="${groupForm.groupMembers != null && groupForm.groupMembers.contains(siteSection.title)}" th:each="siteSection : ${sectionList}" th:value="${siteSection.title}" th:text="|#{groups.section} ${siteSection.title}|"></option>
              <option th:selected="${groupForm.groupMembers != null && groupForm.groupMembers.contains(siteMember.id)}" th:each="siteMember : ${selectableMemberList}" th:value="${siteMember.id}" th:text="|${siteMember.sortName} (${siteMember.eid})|"></option>
            </select>
          </div>
      </div>
      <div class="act">
        <input th:if="${groupForm.groupId == null}" accesskey="s" disabled="disabled" id="create-group-submit-button" type="submit" class="active" th:value="#{groups.button.create}">
        <input th:if="${groupForm.groupId != null}" accesskey="s" id="save-group-submit-button" type="submit" class="active" th:value="#{groups.button.save}">
        <button type="button" class="btn btn-link" th:data-url="@{/}" accesskey="x" id="create-group-cancel-button" th:text="#{groups.button.cancel}">Cancel</button>
      </div>
    </form>
  </div>
  <script th:replace="fragments/javascript :: groupJs" />
</body>
</html>
